<template>
	<view class="repair-wrap">
		<u-tabs ref="tabs" :list="tablist" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs>
		<view class="search">
			<input class="search-input" v-model="result" @input="getRepaireClass" placeholder='请搜索失物名称' />
			<view class="btn-search" @click="getRepaireClass"
				style="width: 21%;color: #FFFFFF;line-height: 33px;border-radius: 18px;text-align: center;	margin-left: -43px;	background: linear-gradient(180deg, #76D904 0%, #417505 100%);">
				搜索
			</view>
		</view>
		<view class="bor_None" v-if="classList.length == 0">
			<view class="bor_Noneone">
				<image class="bor_Noneimage" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/2023-04-07_image/9015d0e9f45344c4007d408cd271f6a.png" mode="">
				</image>
			</view>
			<view class="bor_Nonetext">暂无数据</view>
		</view>
		<view class="repair-box  pl-2 pr-2" v-for="(item,index) in classList" v-if="isActive==0"
			style="margin-top: 10rpx;">
			<view class="nav_item bg-white p-3 rounded-2 shadow" style="">
				<view class="flexClsNowrapSpcBtw" style="justify-content: space-between;">
					<view style="display: flex;">
						<view style="display: flex; align-items: center;">
							<image style="width:17px;height:17px;margin-right: 5px;"
								src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/lost_property.png"></image>
							<h3>{{item.goods_title}}</h3>
						</view>
					</view>
					<view class="">
						<view v-if="item.is_receive==0"
							style="margin-top:-16rpx;background: linear-gradient(90deg, #ebb15ddb 0%, #f9a832 100%);padding: 10rpx 10rpx;color:#fff;border-top-left-radius:20rpx;border-bottom-right-radius:20rpx;">
							未领取
						</view>
						<view v-if="item.is_receive==1"
							style="margin-top:-16rpx;background: #28a745;padding: 10rpx 10rpx;color:#fff;border-top-left-radius:20rpx;border-bottom-right-radius:20rpx;">
							已领取
						</view>
					</view>
				</view>

				<view style="display: flex;margin-top:18rpx; font-family: Verdana, STFangsong, 苹方-简;">
					<view style="color: #999999;">拾取时间：</view>
					<view style="color:#333">{{item.pick_time?item.pick_time.substring(0,16):''}}</view>
				</view>

				<view style="margin-top: 10px;display:flex;">
					<img class="rounded-1" style="width: 100px;height: 80px; object-fit: cover;
						border-radius: 10px;" @click="preview(item.goods_images)" :src="item.goods_images"></img>
					<view style="margin-left: 20rpx;">
						<view style="display: flex;margin-top: 10rpx;">
							<view style="color: #999999;">拾取地点：</view>
							<view style="color:#333">{{item.pick_address}}</view>
						</view>

						<view style="display: flex;margin-top: 10rpx;">
							<view style="color:#333;text-indent: 2em;" v-show="!item.isExpanded">
								{{item.goods_describe!=null&&item.goods_describe.length>25?item.goods_describe.substr(0,25)+'...':item.goods_describe}}
								<text v-if="item.goods_describe!=null&&item.goods_describe.length>25"
									style="color: #00007f;margin-left: 10rpx;"
									@click="item.isExpanded = true">{{'展开'}}</text>
							</view>
							<view style="color:#333;text-indent: 2em;" v-show="item.isExpanded">
								{{item.goods_describe}}
								<text style="color: #999999;margin-left: 10rpx;"
									@click="item.isExpanded = false">{{'收起' }}</text>
							</view>

						</view>

					</view>
				</view>
				<view class=""
					style="display: flex;align-items: center;justify-content: space-between; margin-top: 10px;">
					<view style="display: flex;align-items: center;">
						<view style="color: #999999;">拾取人：</view>
						<view style="color:#333">{{item.contact_person}}</view>
					</view>
					<view>
						<view style="display: flex;">
							<view style="color: #999999;">拾取人电话：</view>
							<view style="color:#333">{{item.contact_phone}}</view>
						</view>

					</view>
				</view>

				<view style="display: flex;margin-top: 5px;color: #999999;">
					<view>领取地址：</view>
					<view style="color:#333">{{item.projectAddress || '无'}}</view>
				</view>
				<view style="margin-top: 5px;">
					<view style="display: flex;;color: #999999;">
						<view>发布时间：</view>
						<view style="color:#333">{{item.begin_time}}</view>
					</view>
					<u-button type="" v-if="current==1 && item.is_receive==0" @click="clickguihuan(item.id)"
						style="margin-top:20rpx; width:100%; height: 70rpx;border-radius:35rpx; background: linear-gradient(rgb(118, 217, 4) 0%, rgb(65, 117, 5) 100%);">归还</u-button>
				</view>
			</view>
		</view>
		<view class="u-m-t-20 repair-box  u-p-l-40 u-p-r-40  mt-2 pl-2 pr-2" v-for="(item,index) in classList"
			v-if="isActive==1">
			<view class="nav_item bg-white p-3 rounded-2 shadow" style="background-color: #ffffff;">
				<view style="display: flex;">
					<view>
						<h3>{{item.goods_title}}</h3>
					</view>
				</view>

				<view style="float: right;margin-top: -26px;">
					<h3>{{item.project_name}}</h3>
				</view>
				<view style="display: flex;margin-top: 10px;font-family: Verdana, STFangsong, 苹方-简;">
					<view style="#666666">拾取时间：</view>
					<view style="color: #999999;">{{item.pick_time}}</view>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<view style="#666666">拾取地点：</view>
					<view style="#333333">{{item.pick_address}}</view>
				</view>
				<view style="margin-top: 10px;">
					<image class="rounded-1" style="width: 100px;height: 100px;" @click="preview(item.goods_images)"
						:src="item.goods_images"></image>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<view style="#666666">联系人员：</view>
					<view style="#666666">{{item.contact_person}}</view>
				</view>
				<view style="float: right;margin-top: -21px;">
					<view style="display: flex;">
						<view style="#666666">联系电话：</view>
						<view style="#666666">{{item.contact_phone}}</view>
					</view>
				</view>
				<view style="display: flex;margin-top: 10px;color: #999999;">
					<view style="#666666">领取地址：</view>
					<view style="#333333">{{item.projectAddress || '无'}}</view>
				</view>
				<view style="display: flex;margin-top: 10px;color: #999999;">
					<view style="#666666">领取时间：</view>
					<view style="#333333">{{item.update_time}}</view>
				</view>
				<view style="margin-top: 10px;">
					<view style="display: flex;color: #999999;">
						<view style="#666666">发布时间：</view>
						<view style="#999">{{item.begin_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<image class="add-process" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/file/2023-03-09/961c1657b8ac76e41b656384bff9376.png"
				@click="navTo('/homePage/lostarticle/newlybuild')"></image>
		</view>

		<u-popup v-model="openDialog" mode="center">
			<view class="" style="width:600rpx ; min-height:600rpx;padding:30rpx 30rpx 40rpx 30rpx">
				<view class="personInfo">
					领取人信息
				</view>
				<view class="">
					<text style="font-size:26rpx">姓名：</text>
					<u-input v-model="personName" type="text" style="" class="input_box" />
				</view>
				<view class="">
					<text>电话：</text>
					<u-input v-model="personNum" type="number" class="input_box" />
				</view>
				<view class="" style="display: flex;align-items: center;margin:40rpx 0">
					<text>身份证正面：</text>
					<view class="" style="display: flex;align-items: center;" @click="uploadImg(0)"
						v-if="idCardone==null">
						<image class="guarn-box-uplod_img" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/uploading.png" mode="">
						</image>
						<view class="guarn-box-uplod">点击上传图片</view>
					</view>
					<image :src="idCardone" v-else @click="uploadImg(0)" alt=""
						style="width: 120rpx;height: 120rpx; border-radius: 20rpx;"></image>
				</view>

				<view class="" style="display: flex;align-items: center;margin:40rpx 0">
					<text>身份证反面：</text>
					<view class="" style="display: flex;align-items: center;" @click="uploadImg(1)"
						v-if="idCardTwo==null">
						<image class="guarn-box-uplod_img" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/uploading.png" mode="">
						</image>
						<view class="guarn-box-uplod">点击上传图片</view>
					</view>


					<image :src="idCardTwo" v-else @click="uploadImg(1)" alt=""
						style="width: 120rpx;height: 120rpx; border-radius: 20rpx;"></image>
				</view>

				<u-button type="" v-if="current==1" @click="commit" style="margin-top:20rpx; width:100%; height: 60rpx;
					border-radius:30rpx; background: linear-gradient(rgb(118, 217, 4) 0%, rgb(65, 117, 5) 100%);">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/image-tool.js'
	export default {
		data() {
			return {
				isActive: 0,
				classList: [],
				tablist: [{
						name: '失物招领'
					},
					{
						name: '我拾取的'
					}
				],
				current: 0,
				is_receive: null, //是否领取(0.否1.是)
				navList: [{
					index: 0,
					title: '未领取'
				}, {
					index: 1,
					title: "已归还"
				}],
				pageIndex: 1,
				loading: false,
				// type: 1,
				nextPage: false,
				listData: [],
				isExpanded: false,
				result: '',
				openDialog: false,
				imgFlag: false,
				idCardone: null,
				idCardTwo: null,
				personName: null,
				personNum: null,
				wupinId: null
			}
		},
		onShow() {
			let _this = this
			if (uni.getStorageSync('phone')) {
				if (uni.getStorageSync('loginFlag')) {
					if (!uni.getStorageSync('hourseList')) {
						uni.showModal({
							title: '请先进行业主认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/pages/address/address'
									})
								}
							}
						});
						this.$openInvite()
					} else {
						_this.showFlag = true
						_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
						_this.name = _this.homelist.proName;
						_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode +
							'-' +
							_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
						_this.getRepaireClass()
					}
				} else {
					uni.showModal({
						title: '请先实名认证',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.push({
									path: '/homePage1/realName/realName'
								})
							}
						}
					});
				}
			} else {
				uni.showModal({
					title: '请先登录',
					showCancel: false,
					confirmText: '确认',
					confirmColor: '#F9A832',
					success: function(res) {
						if (res.confirm) {
							console.log('a')
							_this.$Router.pushTab({
								path: '/pages/user/user'
							})
						}
					}
				});
			}
			this.getRepaireClass()
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: '/homePage/lostarticle/newlybuild'
			})
		},
		onPullDownRefresh() {
			let _this = this
			if (uni.getStorageSync('phone')) {
				if (uni.getStorageSync('loginFlag')) {
					if (!uni.getStorageSync('hourseList')) {
						uni.showModal({
							title: '请先进行业主认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/my/address/address'
									})
								}
							}
						});
						this.$openInvite()
					} else {
						_this.showFlag = true
						_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
						_this.name = _this.homelist.proName;
						_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode +
							'-' +
							_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
						_this.getRepaireClass()
					}
				} else {
					uni.showModal({
						title: '请先实名认证',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								_this.$Router.push({
									path: '/homePage1/realName/realName'
								})
							}
						}
					});
				}
			} else {
				uni.showModal({
					title: '请先登录',
					showCancel: false,
					confirmText: '确认',
					confirmColor: '#F9A832',
					success: function(res) {
						if (res.confirm) {
							console.log('a')
							_this.$Router.pushTab({
								path: '/pages/user/user'
							})
						}
					}
				});
			}
			this.getRepaireClass()
		},
		methods: {
			clickguihuan(e) {
				this.wupinId = e
				this.openDialog = true
			},
			commit() {
				if (this.personName == null) {
					return uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
				}
				if (this.personNum == null) {
					return uni.showToast({
						title: '请输入电话号',
						icon: 'none'
					})
				}
				if (this.idCardone == null) {
					return uni.showToast({
						title: '请上传身份证正面图片',
						icon: 'none'
					})
				}
				if (this.idCardTwo == null) {
					return uni.showToast({
						title: '请上传身份证反面图片',
						icon: 'none'
					})
				}

				this.$request.api.receiveInfo({
					id: this.wupinId,
					is_receive: 1,
					receive_person_name: this.personName,
					receive_person_phone: this.personNum,
					receive_id_positive: this.idCardone,
					receive_id_back: this.idCardTwo,
					receive_time: new Date().toLocaleString()
				}).then(res => {
					this.openDialog = false
					if (res.cood == 0) {
						uni.showToast({
							title: '提交成功'
						})
					} else {
						uni.showToast({
							title: 'res.mes'
						})
					}
				})

			},
			uploadImg(e) {

				let _this = this;
				uni.showActionSheet({
					itemList: ['手机拍照', '本地图片上传'],
					success: function(res) {
						if (res.tapIndex == 0) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['camera '],
								success: function(res) {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										_this.$request.api.image({
											imageBase64: res
										}).then(res => {
											if (e == 0) {
												return _this.idCardone =
													res.data
													.data
											}
											_this.idCardTwo = res.data.data
											_this.imgFlag = false;
											uni.hideLoading();
										})
									})
								}
							})
						} else {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'],
								sourceType: ['album  '],
								success: function(res) {
									if (res.tempFilePaths.length > 0) {
										for (let i = 0; i < res.tempFilePaths
											.length; i++) {
											pathToBase64(res.tempFilePaths[i]).then(
												res => {
													_this.$request.api.image({
														imageBase64: res
													}).then(res => {

														console.log(res,
															'ppppppp')
														console.log(e,
															'ppppppp')
														if (e == 0) {
															return _this
																.idCardone =
																res.data.data
														}
														_this.idCardTwo = res
															.data.data
														console.log(
															'this.idCardone1',
															res.data.data)
														uni.hideLoading();
													})
												})
										}
										_this.imgFlag = false;
									}
								}
							});
						}
					},
					fail: function(res) {}
				});
			},
			tabsChange(e) {
				this.current = e
				this.classList = []
				this.getRepaireClass(e)
			},
			//跳转页面
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			// 获取报修类型
			getRepaireClass(e) {
				if (this.pageIndex < 2) {
					uni.showLoading({
						title: '加载中'
					});
				}
				let params = {
					pageIndex: 1,
					names: this.result,
					project_id: uni.getStorageSync('projectItem').proId,
					user_id: uni.getStorageSync('projectItem').ownerUserId
				}
				if (e == 1) {
					params.userId = uni.getStorageSync('projectItem').ownerUserId
				}
				this.loading = false;
				this.$request.api.lostArticle(params).then(res => {
					if (this.pageIndex == 1) {
						this.classList = res.data.data.datalist || [];
					} else {
						this.classList = [...this.classList, ...res.data.data.datalist];
					}
					console.log(this.classList)
					this.nextPage = res.data.data.isEndPage
					this.loading = true;
					uni.hideLoading();
					uni.stopPullDownRefresh()
				});
			},
			checked(index) {
				this.isActive = index;
				this.getRepaireClass();
			},
			newly() {
				uni.navigateTo({
					url: '/homePage/lostarticle/newlybuild'
				})
			},
			// 图片预览
			preview(item) {
				uni.previewImage({
					urls: [item],
					current: 0,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) +
								'张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		}
	}
</script>


<style lang="scss">
	.repair-wrap {
		width: 100%;
		min-height: 100vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;
		.repair-box {
			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}
			.repair-6 {
				color: #666;
			}
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #427705;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 4rpx;
		background-color: #427705;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.add-process {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		right: 36rpx;
		bottom: 230rpx;
	}

	.bor_None {
		.bor_Noneone {
			width: 232px;
			height: 242px;
			margin: 110px auto;

			.bor_Noneimage {
				width: 100%;
				height: 100%;
			}
		}

		.bor_Nonetext {
			width: 62%;
			margin: -66px auto;
			text-align: center;
			color: #999;
		}

	}

	.add-process {
		width: 102rpx;
		height: 102rpx;
		position: fixed;
		right: 36rpx;
		bottom: 230rpx;
	}

	.input_box {
		margin: 20rpx 0;
		border: 2rpx solid #999;
		border-radius: 30rpx;
		padding-left: 20rpx !important;
		overflow: hidden;
		box-sizing: border-box;
	}
	/deep/.u-input__input {
		min-height: 56rpx !important;
		z-index: 20;
	}


	.personInfo {
		font-size: 36rpx;
		text-align: center;
		margin-bottom: 16rpx;
	}

	.guarn-box-uplod_img {
		width: 19px;
		height: 17px;
		margin-right: 12rpx;
	}

	.guarn-box-uplod {
		color: blue;
		font-weight: 700;
		margin-top: 2px;
	}
	
	.search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #3d7fff;
		height: 100rpx;
		border-bottom: 1rpx solid #eeeeee;
		width: 100%;
		padding-left: 27px;
		padding-right: 31px;
		z-index: 20;
		background: #FFFFFF;
	
		.search-clear {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			left: 271px;
			top: 50%;
			transform: translateY(-50%);
		}
	
		.search-input {
			width: 312px;
			height: 66rpx;
			background: #f0f2f5;
			border-radius: 33rpx;
			line-height: 66rpx;
			font-size: 13px;
			padding: 0 33rpx;
			color: #333333;
			box-sizing: border-box;
		}
	
		.btn {
			width: 21%;
			line-height: 33px;
			border: 1px solid linear-gradient(180deg, #76D904 0%, #417505 100%);
			border-radius: 18px;
			text-align: center;
			margin-left: -43px;
			background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		}
	}
</style>